<template>
  <div>
    <my-header></my-header>

    <el-card class="el-card">
      <!-- 搜索 -->
      <el-row :gutter="15">
        <el-col :span="13">
          <el-input
            placeholder="请输入内容"
            v-model="params.query"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getArr"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="add">添加用户</el-button>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <!-- <el-table :data="arr" border style="width: 100%">
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column prop="username" label="姓名"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="mobile" label="电话"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column prop="mg_state" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="handleState(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              ><i class="el-icon-s-tools"></i
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              ><i class="el-icon-delete"></i
            ></el-button>
            <el-button size="mini" type="warning" @click="handlePut(scope.row)"
              ><i class="el-icon-star-on"></i
            ></el-button>
          </template>
        </el-table-column>
      </el-table> -->
   


      <my-table 
       :data="arr"    
       v-model="params"
      :cols="cols"
      :total="total"
      @size="handleSizeChange"
      @current="handleCurrentChange">    
       <!-- vue2.6后的具名插槽  v-slot:header ,也可赋值接收属性   -->
      <template v-slot:state="{ row }">
        <el-switch @change="userStateChanged(row)" v-model="row.mg_state">
        </el-switch>
      </template>
      <template v-slot:action="{ row }">
        <!-- 编辑 -->
        <el-button size="mini" type="primary" @click="handleEdit(row)"
          ><i class="el-icon-edit"></i
        ></el-button>
        <!-- 删除 -->
        <el-button size="mini" type="danger" @click="handleDelete(row.id)"
          ><i class="el-icon-delete"></i
        ></el-button>
        <!-- 分配角色 -->
        <el-button size="mini" type="warning" @click="handlePut(row)"
          ><i class="el-icon-s-tools"></i
        ></el-button>
      </template>
        
      </my-table>

      <!-- 弹出框 -->

      <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="ruleForm.mobile"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>

      <!-- 分页 -->
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pagenum"
        :page-sizes="[1, 3, 5, 10, 15, 16, 17, 20]"
        :page-size="params.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination> -->

      <!-- 修改 -->

      <el-dialog title="修改用户" :visible.sync="dialogFormVisible1">
        <el-form
          :model="ruleForm1"
          :rules="rules1"
          ref="ruleForm1"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm1.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm1.email"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="ruleForm1.mobile"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm1('ruleForm1')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </el-card>

    <!-- 角色管理 -->

    <el-dialog title="分配角色" :visible.sync="dialogTableVisible">
      <el-form
        :model="ruleForm2"
        ref="ruleForm2"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名称" prop="username">
          {{ ruleForm2.username }}
        </el-form-item>
        <el-form-item label="角色名称" prop="role_name">
          {{ ruleForm2.role_name }}
        </el-form-item>
        <el-form-item label="分配新角色">
          <el-select v-model="list.roleName" placeholder="请分配新的角色">
            <el-option
              v-for="item in list"
              :key="item.id"
              :label="item.roleName"
              :value="item.roleName"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm2('ruleForm2')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUsers,
  getAddUser,
  getDeleteUse,
  getPutUser,
  getRolesName,
  getStatus,
  getRoles,
} from "../../api/api";
import myHeader from '../../components/myHeader.vue';
import MyTable from '../../components/myTable.vue';
// import { MessageBox } from "element-ui";
export default {
  components: { myHeader, MyTable },
  data() {
    return {
            //每个table列配置的内容
      cols: [
        {
          title: "#",
          type: "index",
        },
        {
          title: "姓名",
          name: "username",
        },
        {
          title: "邮箱",
          name: "email",
        },
        {
          title: "电话",
          name: "mobile",
        },
        {
          title: "角色",
          name: "role_name",
        },
        {
          title: "状态",
          slot: "state",
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          width: 270,
        },
      ],
      list: [],
      keyword: "",
      arr: [],
      total: 0,
      params: {
        query: "",
        pagenum: 1,
        pagesize: 5,
      },
      dialogFormVisible: false,
      ruleForm: {
        username: "",
        email: "",
        mobile: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },
      dialogFormVisible1: false,
      ruleForm1: {
        username: "",
        email: "",
        mobile: "",
        id: "",
      },
      rules1: {
        username: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },
      dialogTableVisible: false,
      ruleForm2: {
        username: "",
        id: "",
        role_name: "",
      },
    };
  },
  created() {
    this.getArr();
    this.getRolesPut();
  },
  methods: {
    // 状态改变
    async handleState(row) {
      console.log(row);
      console.log(1);
      let data = await getStatus(row);
      console.log(data, "resStatus");
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.pagesize = val;
      this.getArr();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.pagenum = val;
      this.getArr();
    },
    // 添加
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          //   alert("submit!");
          let res = await getAddUser(this.ruleForm);
          console.log(res, "resAddUser");
          if (res.meta.status == 201) {
            this.getArr();
            this.dialogFormVisible = false;
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    add() {
      this.dialogFormVisible = true;
    },
    // 数据渲染
    async getArr() {
      let res = await getUsers(this.params);
      console.log(res, "usersRes");
      this.arr = res.data.users;
      this.total = res.data.total;
    },
    // 编辑
    handleEdit( row) {
      console.log( row, "编辑");
      this.dialogFormVisible1 = true;
      this.ruleForm1 = row;
      // console.log(this.ruleForm1,"ruleForm1")
    },
    submitForm1(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          //   alert("submit!");
          // console.log(this.ruleForm1.id,"id")
          let res = await getPutUser(this.ruleForm1);
          console.log(res, "resPutUser");
          this.getArr();
          this.dialogFormVisible1 = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 删除
    handleDelete( row) {
      console.log("删除",  row);
      console.log(22);

      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // console.log((11))
          console.log(row.id, "id");
          let res = await getDeleteUse(row);
          console.log(res, "getDeleteUse");
          this.getArr();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      console.log(33);
    },
    // 角色分配
    handlePut(row) {
      console.log(row);
      this.dialogTableVisible = true;
      this.ruleForm2 = row;
    },
    // 分配角色
    // async handleStatus(value) {
    //   console.log(value, "value");
    //   let res = await getRoles(value.id);
    //   console.log(res, "resRoles");
    // },
    submitForm2(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // alert("submit!");
          this.dialogTableVisible = false;
          this.$message.success("角色分配成功");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async getRolesPut() {
      let res = await getRolesName();
      console.log(res, "resRolesName");
      this.list = res.data;
    },
  },
};
</script>

<style scoped>
.el-card {
  margin-top: 20px;
}
</style>6